import React from 'react';
import 'antd/dist/antd.css'
import { List,Button,Checkbox } from 'antd'
import { DeleteOutlined } from '@ant-design/icons';

const TodoList = ({ todos, deleteTodo }) => {
  return (
    <div>
      <List
        size="large"
        dataSource={todos}
        renderItem={(item,index) => (
          <List.Item className="list-item">
            <div>
              <Checkbox style={{marginRight: 10}}/>
              {item}
            </div>
            <Button
              type="primary"
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => {
                deleteTodo(index);
              }}
            />
          </List.Item>
        )}
      />
    </div>
  )
}

export default TodoList
